<template>
  <div>
    <van-tabs v-model="activeName" @click="Onclick">
      <van-tab
        v-for="(item,index) in GetGoodsCategoty.brotherCategory"
        :key="index"
        :title="item.name"
        :name="item.id"
      >
        <!-- 上面标题的内容 -->
        <div class="top">
          <p class="title">{{item.name}}</p>
          <p class="front_desc">{{item.front_desc}}</p>
        </div>
      </van-tab>
    </van-tabs>

    <!-- 商品遍历 -->
    <van-grid :border="false" :column-num="2">
      <van-grid-item v-for="item2 in goodsList.data" :key="item2.id" @click="detail(item2.id)">
        <img :src="item2.list_pic_url" width="90%" alt />
        <p class="yin">{{item2.name}}</p>
        <p class="price">￥ {{item2.retail_price}} 元</p>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
import { GetGoodsList, GetGoodsCategoty } from "@/request/api.js";
export default {
  data() {
    return {
      first: this.$route.query.id,
      ids: "",
      GetGoodsCategoty: "",
      goodsList: "",
      activeName: ""
    };
  },
  methods: {
    // 点击商品，跳转详情页
    detail(d) {
      // console.log(d);
      this.$router.push("/detail/" + d);
    },
    Onclick(id) {
      // 拿到点击的id
      this.ids = id;
      // 上面导航
      GetGoodsCategoty({ id: this.ids }).then(res => {
        this.GetGoodsCategoty = res.data;
        this.$router.push("/channer" + "?id=" + id);
      });
      // // 下面遍历商品
      GetGoodsList({ categoryId: this.ids }).then(res => {
        this.goodsList = res.data;
      });
    }
  },
  components: {},
  created() {
    // 把id转成数字类型  这样导航才能随着走
    let number = Number(this.first);
    // 把number 的值给 activeName
    this.activeName = number;
    // 上面导航
    GetGoodsCategoty({ id: number }).then(res => {
      this.GetGoodsCategoty = res.data;
    });
    // 下面遍历商品
    GetGoodsList({ categoryId: this.first }).then(res => {
      // console.log(res.data);
      this.goodsList = res.data;
    });
  }
};
</script>

<style lang='less' scoped>
// 上面的遍历
.top {
  text-align: center;
  margin-top: 0.2267rem;
  p:nth-child(1) {
    font-size: 0.1833rem;
  }
  p:nth-child(2) {
    color: #666;
  }
  p {
    margin-bottom: 0.1333rem;
  }
}
// 下面的遍历
.yin {
  padding: 0 0.0667rem;
  padding-bottom: 0.2667rem;
  height: 0.1333rem;
}
.price {
  color: rgb(183, 87, 87);
}
</style>
